<template>
  <a-layout class="main">
    <a-layout-sider class="side" width="72px" style="position: fixed">
      <router-link :to="{path: '/home'}" title="返回首页">
        <div class="logo">
          <img src="/logo.svg" alt="not found">
        </div>
      </router-link>
      <!-- 侧边栏条目 -->
      <router-link v-for="item in items" :to="item.to + `${id}`" active-class="active">
        <div class="item">
          <component :is="item.icon" class="icon"/>
          <p class="desc">{{ item.name }}</p>
        </div>
      </router-link>
    </a-layout-sider>
    <a-layout>
      <a-layout-content style="padding-left: 60px;">
        <router-view/>
      </a-layout-content>
    </a-layout>
  </a-layout>


</template>

<script setup lang="ts">
import {useRoute} from "vue-router";

// 路由 区分route、router
const route = useRoute();
// 获取路由参数
const id = route.params.id;

// 侧边栏数据
const items = [
  {
    to: "/program/desc/",
    name: "项目管理",
    icon: 'FolderOpenOutlined'
  },
  {
    to: "/program/api/all/",
    name: "接口管理",
    icon: 'ClusterOutlined'
  },
  {
    to: "/program/invite/",
    name: "成员管理",
    icon: 'UsergroupAddOutlined'
  }
]

</script>

<style scoped lang="less">

.main {
  height: 100%;

  .side {
    width: 72px;
    background-color: #f9fafb;
    height: 100%;
    text-align: center;

    .logo {
      margin-top: 15px;
      margin-bottom: 70px;
    }

    // active 优先级不足
    .active .item {
      color: #2172ce;
    }

    .item {
      color: #878b94;
      padding: 3px;
      border-radius: 12px;
      margin-bottom: 10px;

      .icon {
        font-size: 28px;
        margin-bottom: 8px;
      }

      .desc {
        font-size: 13px;
      }
    }

    .item:hover {
      background-color: #eeeef3;
    }
  }

  .header {
    background-color: #fff;
  }
}

</style>